<template>
  <div>
    <h-box header="创建一个新的品牌">
      <el-steps :active="1" simple class="hui-mb-2">
        <el-step title="填写邀请码" icon="el-icon-edit"></el-step>
        <el-step title="授权小程序" icon="el-icon-upload"></el-step>
        <el-step title="创建完成" icon="el-icon-check"></el-step>
      </el-steps>

      <div class="hui-text-center hui-mb-2">
        <p>授权已认证的小程序账号到非码i应用平台后，我们将会为您创建一个新的商户</p>
      </div>

      <el-button @click="toggleTips(true)" type="success" class="hui-block hui-mx-auto">授权微信小程序</el-button>
    </h-box>

    <!-- 提示模态框，start -->
    <el-dialog title="提示" :visible.sync="visibleTips">
      <h3 class="hui-font-weight-bold">为了您能快速创建新的商户，请您仔细阅读如下注意事项:</h3>
      <ul class="hui-pl-1 hui-mb-0">
        <li>请授权已经通过微信认证的微信小程序账号；</li>
        <li>授权的微信小程序账号，之前未授权到非码i应用平台中其他的品牌上，如已授权过，请解除授权后再试；</li>
        <li>为保证您在非码i应用功能的正常使用，授权时请保持默认选择，把权限统一授权给非码i应用。</li>
      </ul>

      <div slot="footer">
        <el-button @click="handleBinding" type="primary" size="medium">我已知晓，继续授权</el-button>
      </div>
    </el-dialog>
    <!-- 提示模态框，end -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      visibleTips: false
    }
  },
  computed: {},
  methods: {
    // 提示模态框显示隐藏
    toggleTips (val) {
      this.visibleTips = val
    },
    // 跳转授权
    handleBinding () {
      this.toggleTips(false)
      // 模拟跳转
      window.open('http://open.weixin.qq.com')
      this.authConfirm()
    },
    // 授权后的提示弹框
    authConfirm () {
      this.$confirm('请在新窗口中完成微信小程序授权', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '已成功授权',
        cancelButtonText: '授权失败，重试'
      }).then(() => {
        // 授权成功，跳转到完成页面
        this.$router.push({
          path: 'final'
        })
      }).catch(e => {
        // 授权失败，重试
        if (e === 'cancel') {
          this.handleBinding()
        }
      })
    }
  },
  created () {},
  mounted () {}
}
</script>

<style lang="less">
</style>
